<template>
  <view class="proxy">
    <view class="search">
      <u-icon name="search" size="22" color="#297AFD"></u-icon>
      <input type="text" v-model="search" placeholder="请输入学号 / 代理商关键字" @change="handleChange">
    </view>
    <u-empty mode="list" v-if="!list.length"></u-empty>
    <view class="proxy_list">
      <u-list @scrolltolower="scrolltolower" :height="(userInfo.ScanOrderTiCheng ? 850 : 800) + 'rpx'">
        <u-list-item v-for="(item, index) in list" :key="index">
          <view class="list_item">
            <view class="item_top">
              <img src="/static/img/ya.png" alt="" class="avatar">
              <view class="agent_info">
                <view class="agent_name">
                  <view class="agent_id">学号：{{ item.UserNumber }}</view>
                  <view class="agent_tag" :class="{ disabled: handleIsEndTime(item.ProxyValidTime) }">年费代理商</view>
                </view>
              </view>
              <view class="expire_time" v-if="!handleIsEndTime(item.ProxyValidTime)">
                {{ item.ProxyValidTime.slice(0, 10) }} 到期
              </view>
              <view class="expire_time disabled" v-else>已到期</view>
            </view>
            <view class="item_bottom">
              <view class="royalty_detail">
                <view class="royalty_money"
                  @click="$gotoUrl('/pages/selfPages/royalty/index?type=1&UserId=' + item.UserId)">
                  <view class="money_title">续费提成（元）</view>
                  <view class="money_num"><text>{{ item.RenewalBalance }}</text> <span class="arrow"></span></view>
                </view>
                <view class="royalty_money"
                  @click="$gotoUrl('/pages/selfPages/royalty/index?type=0&UserId=' + item.UserId)"
                  v-if="userInfo.ScanOrderTiCheng">
                  <view class="money_title">单量提成（元）</view>
                  <view class="money_num"><text>{{ item.TiChengBalance }}</text> <span class="arrow"></span> </view>
                </view>
              </view>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <view class="proxy_bottom" v-if="userInfo.ScanOrderTiCheng">
      <view class="withdraw_amount">单量可提现金额：{{ userInfo.TiChengBalance }}元</view>
      <view class="withdraw_button" @click="handleConfirm(0)">提现</view>
    </view>
    <view class="proxy_bottom " :class="{ proxy_bottom2: userInfo.ScanOrderTiCheng }">
      <view class="withdraw_amount">续费可提现金额：{{ userInfo.RenewalBalance }}元</view>
      <view class="withdraw_button" @click="handleConfirm(1)">提现</view>
    </view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      search: "",
      list: [],
      form: {
        pageIndex: 1,
        pageSize: 10
      },
    }
  },
  computed: {
    isUpdate () {
      return this.$store.state.isUpdate
    },
    totalNum () {
      const TiChengtotal = this.list.map(x => x.TiChengBalance).reduce((a, b) => a + b, 0)
      const Renewaltotal = this.list.map(x => x.RenewalBalance).reduce((a, b) => a + b, 0)
      const total = TiChengtotal + Renewaltotal
      return total
    },
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  watch: {
    isUpdate (val) {
      if (val) {
        this.form = {
          pageIndex: 1,
          pageSize: 10
        }
        this.list = []
        this.getAgentList()
      }
    }
  },
  methods: {
    async getUserInfo () {
      const res = await this.$http.get('wxuser/userinfo')
      this.$store.commit('setUserInfo', res.Data)
      uni.setStorageSync("userInfo", res.Data)
    },
    //确认提现
    async handleConfirm (type) {
      if (this.handleIsEndTime(this.userInfo.ProxyValidTime)) {
        return uni.showToast({ title: "代理商到期，请联系管理员升级", icon: "none" })
      }
      uni.showModal({
        title: '提示',
        content: '确定提现？',
        success: (res) => {
          if (res.confirm) {
            this.handleWithdrew(type)
          } else if (res.cancel) {
            console.log('取消');
          }
        }
      });
    },
    //提现
    async handleWithdrew (type) {
      let res = null;
      if (type == 0) {
        res = await this.$http.post('payout/payout', {
          "amount": this.userInfo.TiChengBalance,
          "payoutType": 0,
          "remark": "单量提现"
        })
      } else {
        res = await this.$http.post('payout/payout', {
          "amount": this.userInfo.RenewalBalance,
          "payoutType": 1,
          "remark": "续费提现"
        })
      }

      if (res.Code == 200) {
        uni.showToast({ title: "提现成功" })
        this.getUserInfo()
        this.form.pageIndex = 1
        this.list = []
        this.getAgentList()
      } else {
        uni.showToast({ title: res.Msg, icon: "none" })
      }
    },
    //是否过期
    handleIsEndTime (time) {
      return new Date(time).getTime() < new Date().getTime()
    },
    // 我的代理列表
    async getAgentList (obj = {}) {
      uni.showLoading({ title: "加载中" })
      const res = await this.$http.get('wxuser/myproxy', Object.assign(this.form, obj))
      this.list = this.list.concat(res.Data.DataList)
      //加载结束
      this.$store.commit("setIsUpdate", false)
      uni.hideLoading();
    },
    //搜索
    handleChange () {
      this.form = {
        pageIndex: 1,
        pageSize: 10
      }
      this.list = []
      const isNotNumber = isNaN(Math.floor(this.search))
      const obj = {}
      // if (isNotNumber) {

      // } else {
      //   obj.UserName = Number(this.search)
      // }
      obj.KeyWord = this.search
      this.getAgentList(obj)
    },
    //加载分页
    scrolltolower () {
      this.form.pageIndex += 1
      this.getAgentList()
      console.log("触底了")
    }
  },
  created () {
    this.getAgentList()
  }
}
</script>

<style lang="scss" scoped>
/* 我的代理 */

.proxy {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.search {
  width: 694rpx;
  height: 36px;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  margin: 15px auto;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.search image {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-right: 4px;
}

.search input {
  width: 100%;
  font-weight: bold;
  font-size: 24rpx;
  color: #000000;
}

.search input::placeholder {
  color: #919191;
}

.proxy_list {
  width: 100%;
  position: absolute;
  top: 66px;
  bottom: 100rpx;
  left: 0;
  overflow: auto;
}

.proxy_bottom {
  width: 100%;
  height: 88rpx;
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
}

.proxy_bottom2 {
  bottom: 88rpx;
}

.withdraw_amount {
  width: 486rpx;
  background: #93A2B5;
  padding-left: 64rpx;
  line-height: 88rpx;
  box-sizing: border-box;
  font-family: PingFang SC;
  font-size: 32rpx;
  color: #FFF;
}

.withdraw_button {
  width: 266rpx;
  // width: 100%;
  background: linear-gradient(45deg, #1946F9 0%, #0F67FF 100%);
  line-height: 88rpx;
  text-align: center;
  font-family: PingFang SC;
  font-size: 32rpx;
  color: #FFF;
  cursor: pointer;
}

.list_item {
  padding: 0 28rpx;
  margin-bottom: 28rpx;
  box-sizing: border-box;

  .item_top {
    width: 100%;
    padding: 36rpx 28rpx 22rpx 28rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #DFEDFD 0%, #F8F8F8 100%);
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    display: flex;
    position: relative;

    .avatar {
      width: 56rpx;
      height: 56rpx;
      border-radius: 10rpx;
    }

    .agent_info {
      margin-left: 16rpx;

      .agent_name {
        display: flex;
        align-items: center;

        .agent_id {
          height: 40rpx;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
          line-height: 40rpx;
        }

        .agent_tag {
          width: 118rpx;
          height: 32rpx;
          padding-left: 6rpx;
          // background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
          background: linear-gradient(180deg, #FFD631 0%, #D19508 100%);
          font-family: PingFang SC;
          font-size: 20rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 32rpx;
          border-radius: 50rpx;
          margin-left: 8rpx;
        }

        .agent_tag.disabled {
          background: #BFBFBF;
        }
      }

      .superiors {
        margin-top: 4rpx;
        height: 32rpx;
        font-family: PingFang SC;
        font-size: 22rpx;
        color: #64707D;
        line-height: 32rpx;
      }

      .else_right {
        display: flex;
        margin-top: 10rpx;
        height: 28rpx;

        .right_name {
          display: flex;
          align-items: center;
          margin-right: 72rpx;

          img {
            display: inline-block;
            width: 20rpx;
            height: 20rpx;
          }

          text {
            display: inline-block;
            margin-left: 4rpx;
            font-family: PingFang SC;
            font-size: 20rpx;
            color: #35BB85;
          }
        }
      }
    }

    .expire_time {
      position: absolute;
      top: 40rpx;
      right: 28rpx;
      font-family: DIN;
      font-weight: 500;
      font-size: 26rpx;
      color: #A47812;
    }

    .expire_time.disabled {
      color: #9B9B9B;
    }
  }

  .item_bottom {
    width: 100%;
    padding-bottom: 30rpx;
    box-sizing: border-box;
    background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 100%);
    border-radius: 22rpx;

    .royalty_detail {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 30rpx 0rpx 34rpx;
      box-sizing: border-box;

      .royalty_money {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .money_title {
          height: 34rpx;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 24rpx;
          color: #83889F;
          line-height: 34rpx;
        }

        .money_num {
          height: 48rpx;
          font-family: DIN;
          display: flex;
          align-items: center;
          color: #0051FF;
          font-size: 28rpx;

          text {
            display: inline-block;
            font-size: 40rpx;
          }

          .arrow {
            width: 12rpx;
            height: 12rpx;
            border-top: 1px solid #0051FF;
            border-right: 1px solid #0051FF;
            transform: rotate(45deg);
            margin-left: 12rpx;
          }
        }

        .royalty_time {
          height: 48rpx;
          font-family: DIN;
          font-weight: 500;
          font-size: 36rpx;
          color: #000000;
          line-height: 48rpx;
        }
      }
    }

    .send_agent {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20rpx;
      color: #0051FF;
      line-height: 28rpx;
      margin-top: 12rpx;
      margin-left: 36rpx;
      border-bottom: 1px solid #0051FF;
      padding-bottom: 4rpx;
      display: inline-block;
    }

    .bank_discount {
      width: calc(100% - 48rpx);
      height: 298rpx;
      background: #EFF0F5;
      border-radius: 12rpx;
      margin: 24rpx;
      padding: 18rpx 22rpx 16rpx 16rpx;
      box-sizing: border-box;

      .bank_title {
        display: flex;
        justify-content: space-between;

        .title_left {
          display: flex;
          align-items: center;
          height: 40rpx;

          .line {
            width: 6rpx;
            height: 18rpx;
            background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
            border-radius: 200rpx;
          }

          .title_name {
            margin-left: 8rpx;
            width: 168rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }

        .title_more {
          display: flex;
          align-items: center;

          .more {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 20rpx;
            color: #0051FF;
          }
        }
      }

      .bank_list {
        margin-top: 22rpx;

        .bank_item {
          width: 100%;
          height: 58rpx;
          background: #FFFFFF;
          border-radius: 8rpx;
          padding: 14rpx 18rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 14rpx;

          .bank_item_left,
          .bank_item_right {
            display: flex;
            align-items: center;

            img {
              display: inline-block;
              width: 26rpx;
              height: 30rpx;
            }

            .left_name {
              margin-left: 18rpx;
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #3D4353;
            }

            .right_name {
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #83889F;
            }

            .right_price {
              font-family: DIN;
              font-weight: bold;
              font-size: 26rpx;
              color: #00A767;
            }
          }

          &:nth-child(2) {
            .right_price {
              color: #3179D6;
            }
          }

          &:nth-child(3) {
            .right_price {
              color: #0051FF;
            }
          }
        }
      }
    }

    .edit_agent {
      height: 34rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .edit {
        margin-left: 12rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #0051FF;
      }
    }
  }
}
</style>